<script setup lang="ts">
import { useRoute } from "vue-router";

// 获取HomeView组件的参数 获取当前组件的路由信息
// 注意：useRoute ：路由，管理一个页面  useRouter :路由器，管理所有页面
const route = useRoute();
</script>

<template>
  <div class="search">
    <!-- 查询参数方式 -->
    <!-- <p>搜索关键字: {{ route.query.keyword }}</p> -->
    <p>搜索关键字: {{ route.params.keyword }}</p>
    <!-- 动态路由传参方式 -->
    <p>搜索结果:</p>
    <p>params: {{ route.params }}</p>
    <p>query: {{ route.query }}</p>
    <!-- 查询参数方式 -->
    <!-- <p>{{ route.query }}</p> -->
    <!--  动态路由传参方式-->
    <p>{{ route.params }}</p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
